<template>
    <div clsss="update-password" style="background-color: #F5F5F5;">
        <wxc-minibar title="设置交易密码">
            <!-- <image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png"  style="height:28px;width:16px;"></image>
             <div class="header-con" slot="middle">
                <text class="header-title">设置交易密码</text>
            </div> -->
        </wxc-minibar>

        <div class="form">
            <div class="form_fl">
                <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">交易密码</text>
            </div>
            <div class="form_fr">
                <input style="font-size: 28px; color: #A7A7A7; height:42px" type="password" class="input" @focus="focuspassword = true" v-model="password" maxlength="6" minlength="6" placeholder="6位数字密码">
            </div>
        </div>
        <div class="form">
            <div class="form_fl">
                <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">确认交易密码</text>
            </div>
            <div class="form_fr">
                <input style="font-size: 28px;color: #A7A7A7; height:42px" type="password" class="input" v-model="passwordconfirm" maxlength="6" minlength="6" placeholder="请再次输入新密码">
            </div>
        </div>
        <div class="button_box">
           <div class="button" @click="submitpassword">
             <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #FFFFFF;">完成设置</text>
           </div>
        </div>
        <wxc-mask :show="alertCode" width="320" height="80" mask-bg-color="#333" :has-overlay="false"> 
			<div class="tip"><text class="tip-font">{{ content }}</text></div>
		</wxc-mask>
    </div>

</template>

<script>
    import { postResponsesToken } from '@/api.js'
    import { WxcMask } from 'weex-ui'
    import { debug } from 'util'
    import { getBaseUrl }  from "@/utils/index.js"
    import WxcMinibar from "@/components/modules/wxc-minibar/index.js"

    let navigator = weex.requireModule('navigator')
    const modal = weex.requireModule('modal')
    const storage = weex.requireModule("storage")

    export default {
        data(){
            return {
                alertCode:false,
                content:'',
                password:'',
                passwordconfirm:'',
                accountId:'',
                baseURL:'',
                focuspassword:false
            }
        },
        components:{
            WxcMask,
            WxcMinibar
        },
        created () {
            // 获取路径
            this.baseURL = getBaseUrl(weex.config.bundleUrl, true)
        },

        methods: {
        
            alert(title, msg) {
                this.alertCode = true
                this.content= title
                if(this.close) return ;
                this.close = true
                setTimeout(()=>{
                    this.alertCode = false
                    this.close = false
                },2000)
            },

            // 获取缓存指定数据
            getItem (name) {
                return new Promise((resolve, reject)=>{
                    storage.getItem(name, event => {
                        if (event.result === "success") {
                            resolve(event.data);
                        } else {
                           reject('获取定位失败')
                        }
                    })
                })
            },

            // 缓存数据
            setItemDate(name, data) {
                return new Promise((resolve, rejects) => {
                    storage.setItem(name, JSON.stringify(data), event => {
                        if (event.result === "success") {
                            resolve(true)
                        } else {
                            rejects("获取缓存key失败!")
                        }
                    })
                })
            },

            async submitpassword(){

                if( !/^\d+$/.test(this.password) || !/^\d+$/.test(this.passwordconfirm)) {
                    this.alert('请输入6位数字密码')
                    return false
                }
                if(this.password===''){
                    this.alert('请输入密码')
                    return false
                }
                if(this.passwordconfirm===''){
                    this.alert('请输入确认密码')
                    return false
                }
                if(this.password != this.passwordconfirm){
                    this.alert('输入的密码不一致')
                    return false
                }

                let param= {
                    newPayPassword:this.password,
                    type: 3
                }
                let data = await postResponsesToken('account/user/updatePayPassword', param)

                if( data.code === 0 ) {
                    let data = await this.getItem('personalDetails')
                    let param = Object.assign(JSON.parse(data), {'hasPayPassword': 1})
            
                    this.setItemDate('personalDetails', param).then((value)=>{
                        navigator.pop()
                    })
                } else {
                    modal.toast({message: error})
                }
            }
        }
    };
</script>
<style scoped>

   .update-password{
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
              background-color: #F5F5F5;

     
    }
    .header {

        width: 750px;
        height: 90px;
        background-color: #FFFFFF;
        box-shadow: 0 4px 15px 0 rgba(229,229,229,0.50);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .header-img {
        position: absolute;
        left: 32px;
        top: 34px;
        margin-left: 0;
    }
    .header-img-right {
        position: absolute;
        right: 32px;
        top: 34px;
        margin-left: 0;
    }
    .form{
        height: 112px;
        background-color: #FFFFFF;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(245,245,245);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
           border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #f5f5f5;
    }
    .input{
        height:150px;
    }
    .form_fl{
      width: 300px;
      padding-left: 31px;
    }
    .form_fr{
       width: 447px;
    }
    .button_box{
        margin-top: 80px;
        padding-left: 32px;
        padding-right: 32px;
    }
    .button{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 96px;
        background-color: #E70D0D;
        border-radius: 4px;
    }
    .tip {
        width:320px;
        height: 80px;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .tip-font {
        color:#fff;
        font-size:28px;
    }
    .header-con {
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        flex-direction: row;
    }
    .header-title {
        font-size: 34px;
        color: #fff;
        font-weight: 600;
        font-family: PingFangSC-Medium;
    }
</style>